<template>
  <div>
    <input
      type="text"
      placeholder="输入要搜索的关键字"
      v-if="isShow"
      ref="inp"
    />
    <button v-else @click="searchFn">点击搜索,出输入框并马上处于激活状态</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        async searchFn(){
            this.isShow = true // 点击显示输入框, 隐藏按钮
            // this.$refs.inp.focus() // 让输入框处于激活状态

            // 发现报错了, this.$refs.inp是个undefined(没获取到dom标签)
            // 因为数据isShow改变后, "异步"显示input, 而代码会继续往下走所以还没获取到input, 所以是undefined

            // 解决: 在dom更新后, 会触发$nextTick里的回调函数
            // this.$nextTick(() => {
            //     this.$refs.inp.focus();
            // })

            await this.$nextTick()
            this.$refs.inp.focus()
        }
    }
}
</script>

<style>
</style>